<script setup lang='ts'>
import { useBirdStore } from '@/stores/bird'
import { defineProps } from 'vue';
import { getBirdInfoByIdService } from '@/api/birds'

const props = defineProps<{
    birdId: number;
}>();

const birdStore = useBirdStore()

// //判断传过来的birdId是否和缓存中的birdId一致，若不一致则调用后端接口获取对应鸟类信息并刷新缓存
// if (birdStore.birdId != props.birdId) {

//     let result = await getBirdInfoByIdService(props.birdId)

//     if (result.code == 200) {
//         birdStore.setId(result.data.id)
//         birdStore.setName(result.data.name)
//         birdStore.setSpecies(result.data.species)
//         birdStore.setHabits(result.data.habits)
//         birdStore.setMorphologyAndFeatures(result.data.morphologyAndFeatures)
//         birdStore.setDescription(result.data.description)
//         birdStore.setGrowthAndDistribution(result.data.growthAndDistribution)
//         birdStore.setImageUrl(result.data.imageUrl)
//         birdStore.setSoundUrl(result.data.soundUrl)
//         birdStore.setCreatedAt(result.data.createdAt)
//         birdStore.setUpdatedAt(result.data.updatedAt)
//     } else {
//         ElMessage.error(result.msg ? result.msg : '获取鸟类信息失败')
//     }

// }

</script>

<template>
    <div class="container" v-html="birdStore.bird.morphologyAndFeatures">
    </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  /* margin: 10px; */
  /* padding: 10px; */
}
</style>